<template>
  <div>
    <el-form :inline="true" :model="Cha" class="demo-form-inline">
      <el-form-item label="单位">
        <el-input v-model="Cha.danwei"></el-input>
      </el-form-item>
        <el-form-item label="发票类型">
    <el-select v-model="Cha.leixing" placeholder="发票类型">
       <el-option label="全部" value=""></el-option>
      <el-option label="普通发票" value="普通发票"></el-option>
      <el-option label="增值发票" value="增值发票"></el-option>
    </el-select>
  </el-form-item>
     
      <el-form-item label="日期" required>
        <el-col :span="18">
          <el-form-item prop="date1">
          <el-input type="date" v-model="Cha.riqi"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="JinPage">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="danger" @click="Jinpidelete()">批量删除</el-button>
    <el-button type="danger" @click="JinAdd()">新增</el-button>
    <el-table ref="yingpi" :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="发票号" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.fapiao }}</span>
        </template>
      </el-table-column>

      <el-table-column label="单位" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.danwei }}</span>
        </template>
      </el-table-column>

      <el-table-column label="发票类型" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.leixing }}</span>
        </template>
      </el-table-column>

    

     

      <el-table-column label="金额" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.jine }}</span>
        </template>
      </el-table-column>
        <el-table-column label="税率" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.shuilv }}%</span>
        </template>
      </el-table-column>
       <el-table-column label="税额" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.shuie }}</span>
        </template>
      </el-table-column>

      <el-table-column label="日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.riqi }}</span>
        </template>
      </el-table-column>
      <el-table-column label="制单人" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.zhidanren }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.beizhu }}</span>
        </template>
      </el-table-column>
     
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="JinEdit(scope.row.id)"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="JinDelete(scope.row.id)"
            >删除</el-button
          >
        
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="Cha.page"
      :limit.sync="Cha.maxResultCount"
      :pageSizes="[2, 4, 6, 8]"
      @pagination="JinPage"
    />
    <!--应收添加-->
    <el-dialog title="提示" :visible.sync="YingAddShow" width="30%">
      <el-form ref="form" :model="XianList" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="发票号">
              <el-input v-model="XianList.fapiao"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      
        <el-row>
          <el-col :span="12">
            <el-form-item label="单位">
              <el-input  v-model="XianList.danwei"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
          
                <el-form-item label="结算方式" prop="resource">
              <el-radio-group v-model="XianList.leixing">
                <el-radio label="普通发票" value="普通发票"></el-radio>
                <el-radio label="增值发票" value="增值发票"></el-radio>
                 
              </el-radio-group>
            </el-form-item>
           
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="发票金额">
              <el-input type="number" v-model="XianList.jine"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
           <el-row>
          <el-col :span="12">
            <el-form-item label="税率" >
              <el-input type="number" v-model="XianList.shuilv" placeholder="请输入百分之几"  @change="changeshui()"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="税额" >
              <el-input type="number" v-model="XianList.shuie" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="日期" required>
              <el-col :span="25">
                <el-form-item prop="date1">
                   <el-input type="date" v-model="XianList.riqi"></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="制单人">
              <el-input v-model="XianList.zhidanren"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="XianList.beizhu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

    

        <el-form-item>
          <el-button type="primary" @click="JinBao()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--应收编辑-->
    <el-dialog title="提示" :visible.sync="YingEintShow" width="30%">
      <el-form ref="form" :model="YingTable" label-width="80px">
       <el-row>
          <el-col :span="12">
            <el-form-item label="发票号">
              <el-input v-model="YingTable.fapiao"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      
        <el-row>
          <el-col :span="12">
            <el-form-item label="单位">
              <el-input  v-model="YingTable.danwei"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
          
                <el-form-item label="结算方式" prop="resource">
              <el-radio-group v-model="YingTable.leixing">
                <el-radio label="普通发票" value="普通发票"></el-radio>
                <el-radio label="增值发票" value="增值发票"></el-radio>
                 
              </el-radio-group>
            </el-form-item>
           
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="发票金额">
              <el-input type="number" v-model="YingTable.jine"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
           <el-row>
          <el-col :span="12">
            <el-form-item label="税率" >
              <el-input type="number" v-model="YingTable.shuilv"  placeholder="请输入百分之几"   @change="changeshuienit()" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="税额" >
              <el-input type="number" v-model="YingTable.shuie" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="日期" required>
              <el-col :span="25">
                <el-form-item prop="date1">
                   <el-input type="date" v-model="YingTable.riqi"></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="制单人">
              <el-input v-model="YingTable.zhidanren"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="YingTable.beizhu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="JinEintBao()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  JinPages, //查询
  Jinpideletes, //批删
  JinDeletes, //单删
  JinBaos, //添加
  JinEdits, //反填
  JinEintBaos, //保存
  
} from "@/api/system_base/JiesuanApi"; //引入apijs
import Pagination from "@/components/Pagination"; // 引入分页组件
export default {
  components: { Pagination },
  data() {
    return {
      YingEintShow: false,
      YingAddShow: false,
      total: 0,
      tableData: [],

      Cha: {
        danwei: "",
        leixing: "",
        riqi: "",
      
        page: 1, //当前页
        maxResultCount: 2, //每页几条
        skipCount: 0, //用于api接口  第一条数据位置
      },
      XianList: {
        fapiao: "",
        danwei: "",
        leixing: "",
        shuilv: "",
        shuie: "",
        jine: "",
        riqi: "",
        zhidanren: "",
        beizhu: "",
       
      },
      YingTable: {
         fapiao: "",
        danwei: "",
        leixing: "",
        shuilv: "",
        shuie: "",
        jine: "",
        riqi: "",
        zhidanren: "",
        beizhu: "",
      },
    };
  },
  created() {
    this.JinPage();
  },
  methods: {
      //修改税率计算
      changeshuienit(){
            var jin= this.YingTable.jine;
            var shui =this.YingTable.shuilv;
            var aa=jin*shui/100;
            this.YingTable.shuie=aa;
      },
      //添加税额计算
        changeshui(){
            var jin= this.XianList.jine;
            var shui =this.XianList.shuilv;
            var aa=jin*shui/100;
            this.XianList.shuie=aa;
        },
    //保存
    JinEintBao() {
      if(this.YingTable.fapiao=="")
      {
        this.$message("发票号不能空");
        return;
      }
      if(this.YingTable.danwei=="")
      {
        this.$message("单位不能空");
        return;
      }
      if(this.YingTable.leixing=="")
      {
        this.$message("结算方式不能空");
        return;
      }
       if (this.YingTable.jine == "" || this.YingTable.jine <= 0) {
        this.$message("金额不能空或者数值范围不正确");
        return;
      }
       if (this.YingTable.shuilv == "" || this.YingTable.shuilv <= 0) {
        this.$message("税率不能空或者数值范围不正确");
        return;
      }
      
      
      if(this.YingTable.riqi=="")
      {
        this.$message("日期不能空");
        return;
      }
      if(this.YingTable.zhidanren=="")
      {
        this.$message("制单人不能空");
        return;
      }
      if(this.YingTable.beizhu=="")
      {
        this.$message("备注不能空");
        return;
      }
    
      JinEintBaos(this.YingTable).then((r) => {
        this.$message("修改成功");
        this.YingEintShow = false;
        this.JinPage();
      });
    },
    //反填
    JinEdit(id) {
      this.YingEintShow = true;
      JinEdits(id).then((r) => {
       var aa= r.result;
       this.YingTable=aa;
       var that=this;
       that.YingTable.riqi=this.YingTable.riqi.substring(10,0);
       
      });
    },
    //添加保存
    JinBao() {
     
      var data = new Date();
      let year = data.getFullYear(); // 年
      let month = data.getMonth() + 1; // 月
      let day = data.getDate(); // 日
      let hour = data.getHours(); // 时
      let minute = data.getMinutes(); // 分
      let second = data.getSeconds(); // 秒
      var ff = "SY" + year + month + day + hour + minute + second;
      this.XianList.danhao = ff;
      if(this.XianList.fapiao=="")
      {
        this.$message("发票号不能空");
        return;
      }
      if(this.XianList.danwei=="")
      {
        this.$message("单位不能空");
        return;
      }
      if(this.XianList.leixing=="")
      {
        this.$message("结算方式不能空");
        return;
      }
        if (this.XianList.jine == "" || this.XianList.jine <= 0) {
        this.$message("金额不能空或者数值范围不正确");
        return;
      }
       if (this.XianList.shuilv == "" || this.XianList.shuilv <= 0) {
        this.$message("税率不能空或者数值范围不正确");
        return;
      }
      
     
      if(this.XianList.riqi=="")
      {
        this.$message("日期不能空");
        return;
      }
      if(this.XianList.zhidanren=="")
      {
        this.$message("制单人不能空");
        return;
      }
      if(this.XianList.beizhu=="")
      {
        this.$message("备注不能空");
        return;
      }
      JinBaos(this.XianList).then((r) => {
        this.$message("添加成功");
        this.YingAddShow = false;
        this.JinPage();
      });
    },
    JinAdd() {
        
      this.YingAddShow = true;
      
    },
    //单删
    JinDelete(id) {
      if (confirm("确认要删除吗")) {
        JinDeletes(id).then((r) => {
          this.$message("删除成功");
          this.JinPage();
        });
      }
    },
    //批量删除
    Jinpidelete() {
      var arrid = [];
      var id = this.$refs.yingpi.selection;
      id.forEach((r) => {
        arrid.push(r.id);
      });
      if (confirm("确认删除吗")) {
        arrid.forEach((r) => {
          Jinpideletes(r).then((r) => {});
          this.$message("批删成功");
          this.JinPage();
        });
      }
    },

    //查询
    JinPage() {
      this.listLoading = true;
      this.Cha.skipCount = (this.Cha.page - 1) * this.Cha.maxResultCount;

      JinPages(this.Cha).then((r) => {
        if (r.result.items != null) {
          var that = this;
          that.tableData = r.result.items;
          this.listLoading = false; // 隐藏加载效果
          this.total = r.result.totalCount;
        }
      });
    },
    ChaJinPage() {
      this.Cha.page = 1;
      this.JinPage();
    },
  },
};
</script>